<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/address.css" />
</head>
<body class="white">
	<div class="mui-content">
	    <ul class="mui-table-view addressList loading" id="vueMain">
	    		<div v-if="list.length<1">
	    			您现在还没有地址！
	    		</div>
		    	<template v-else v-for="(item, index) in list">
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-right link" src="../icon/edit.png" _id="newInput" _title="编辑地址" _href="newInput.html" :_extras="'ads_id='+item.id" />
		                <div class="mui-media-body " :data-idx="index" v-bind:class="index==idx?'active':''">
		                    {{item.name}}<span>{{item.mobile}}</span>
		                    <p class="mui-ellipsis">{{item.province_name}} {{item.city_name}} {{item.area_name}} {{item.address}}</p>
		                </div>
		            </a>
		        </li>
	        </template>
	    </ul>
	    <div class="mui-content-padded">
	   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block link" _id="newInput" _title="新建地址" _href="newInput.html">新建地址</button>
	   </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, user;
	mui.init()
	mui.plusReady(function () {
		views = bexta.getWebview();
		user = bexta.getStorage(USER);
		bexta.ajax(api.address_list, function(res){
			initVue(res);
		}, {data:{uid:user.uid}});
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:res,
				idx:-1
			},
			mounted:function(){
				var self = this;
				document.querySelector('.loading').classList.add('loadRun');
				//修选时选中
				if( views.def ){
					mui.each(self.list, function(index){
						if(this.address_id == views.def.id || this.address_id == views.def.address_id){
							self.idx = index
						}
					});
				}
				//选中地址
				mui('#vueMain').on('tap', '.mui-media-body', function(){
					var idx = this.getAttribute('data-idx');
					mui.each(apps.list, function(){
						 apps.idx = idx;
					})
//					bexta.jsonToString(apps.list[idx])
					mui.fire(views.opener(), 'setBourn', {
						ads:apps.list[idx]
					});
					setTimeout(function(){
						mui.back();
					});
					
				});
			}
		});
	}
window.addEventListener('updateAddress', function(evt){
	var ads = evt.detail.address, active = false;
	apps.list = ads;
//	mui.each(apps.list, function(index){
//		if( ads[0].id == this.id || ads[0].address_id == this.address_id  ){
//			active = true;
//			Vue.set(apps.list, index, ads[0]);
//		}
//	});
//	if(!active){
//		apps.list.push( ads[0] );
//	}
	
});
</script>
</body>
</html>